<!-- saved from url=(0014)about:internet -->
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Thumbnails with watermarks upload example</title>
	<link rel="stylesheet" href="styles.css">
</head>
<body>
Sample: <b>watermarkthumbnails.html</b>&nbsp;&nbsp;<a href="javascript:location.reload(true);"><img border="0" src="images/refresh.png" width="16" height="16">&nbsp;Refresh frame</a>&nbsp;&nbsp;<a target="_parent" href="index.htm"><img border="0" src="images/home.png" width="16" height="16">&nbsp;Examples home</a><br/><br/>
<!-- text below wil be shown if JavaScript disabled at browser -->
<span id="noscriptdiv" style="border:1px  solid #FF0000;display:block;padding:5px;text-align:left; background: #FDF2F2;color:#000;">Active Scripting (JavaScript) should be enabled in your browser for this application to function properly!</span>
<script type="text/javascript">
	document.getElementById('noscriptdiv').style.visibility = 'hidden';
	document.getElementById('noscriptdiv').style.height = 0;
	document.getElementById('noscriptdiv').style.padding = 0;
	document.getElementById('noscriptdiv').style.border = 0;
</script>

This example shows the possibility of image upload and thumbnails upload with watermarks.<br>
<br>
For the  example you need to specify script URL that accept the files. Open the example  in a text editor and specify the property value &quot;uploadUrl&quot; of  MultiPowUpload object. The value can be: 
<ul>
  <li>For ASP: <code>FileProcessingScripts/ASP/ClearASP/uploadfiles.asp</code></li>
  <li>For PHP : <code>FileProcessingScripts/PHP/uploadfiles.php</code>&nbsp;<strong>(Default value)</strong></li>
  <li>For ASP.NET (C Sharp): <code>FileProcessingScripts/ASP.NET/CSharp/uploadfiles.aspx</code></li>
  <li>For ASP.NET (VB.NET): <code>FileProcessingScripts/ASP.NET/VBNET/uploadfiles.aspx</code></li>
   <li>For Perl : <code>FileProcessingScripts/PERL/uploadfiles.pl</code></li>
   <li>For Cold Fusion : <code>FileProcessingScripts/ColdFusion/uploadfiles.cfm</code></li>
   <li>For JSP : <code>FileProcessingScripts/JSP/uploadfiles.jsp</code></li>
</ul>


<table>
	<tr>
		<td>
			Use image file as watermark:<br>
			<input type="text" id="watermark_url" value="images/element-it.jpg" READONLY/>
			<input type="Button" value="apply" onClick="javascript: setWatermark();" /><br>
			<br>Or type "watermark" text here:<br>
			<input type="text" id="watermark_text" value="Element-IT" />
			<input type="Button" value="apply" onClick="javascript: setWatermarkText();" /></br>
			<br>Select position for watermark:
			<table>
				<tr>
					<td>
						<input type="radio" name="watermark_position" value="Top.Left" onClick="javascript: setWatermarkPosition(this);"> Top.Left
					</td>
					<td>
						<input type="radio" name="watermark_position" value="Top.Center" onClick="javascript: setWatermarkPosition(this);"> Top.Center
					</td>
					<td>
						<input type="radio" name="watermark_position" value="Top.Right" onClick="javascript: setWatermarkPosition(this);"> Top.Right
					</td>
				</tr>
				<tr>
					<td>
						<input type="radio" name="watermark_position" value="Center.Left" onClick="javascript: setWatermarkPosition(this);"> Center.Left
					</td>
					<td>
						<input type="radio" name="watermark_position" value="Center.Center" onClick="javascript: setWatermarkPosition(this);"> Center.Center
					</td>
					<td>
						<input type="radio" name="watermark_position" value="Center.Right" onClick="javascript: setWatermarkPosition(this);"> Center.Right
					</td>
				</tr>
				<tr>
					<td>
						<input type="radio" name="watermark_position" value="Bottom.Left" onClick="javascript: setWatermarkPosition(this);"> Bottom.Left
					</td>
					<td>
						<input type="radio" name="watermark_position" value="Bottom.Center" onClick="javascript: setWatermarkPosition(this);"> Bottom.Center
					</td>
					<td>
						<input type="radio" name="watermark_position" value="Bottom.Right" onClick="javascript: setWatermarkPosition(this);" checked> Bottom.Right
					</td>
				</tr>
			</table>
		</td>
		<td valign="bottom">
			<br><br>Text color:<br>
			<input type="text" id="watermark_color" value="#FF0000" />
			<input type="Button" value="apply" onClick="javascript: setWatermarkColor();" />
			<br>Text size in pixels:<br>
			<input type="text" id="watermark_size" value="18" />
			<input type="Button" value="apply" onClick="javascript: setWatermarkSize();" />
			<br>Text style :<br>			
			<select id="watermark_style"onChange="javascript: setWatermarkStyle(this);"/>
				<option value="">Normal</option>
				<option value="bold" selected>Bold</option>
				<option value="italic">Cursive</option>
			</select>
		</td>
	</tr>
	<tr>
		<td align="center">
<br>
<div id="MultiPowUpload_holder">
<strong>You need at least 10 version of Flash player!</strong>
<a href="http://www.adobe.com/go/getflashplayer">&nbsp;<img border="0" src="images/get_flash_player.gif" alt="Get Adobe Flash player" /></a>
</div>
<!-- SWFObject home page: http://code.google.com/p/swfobject/
You can replace src value with the http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js (Most users has such file cached)
 -->
<script type="text/javascript" src="Extra/swfobject.js"></script>
<script type="text/javascript">
	var params = {  
		BGColor: "#FFFFFF"
	};
	
	var attributes = {  
		id: "MultiPowUpload",  
		name: "MultiPowUpload"
	};
	
	var flashvars = {
	  "serialNumber": "put your serial number here",
	  "uploadUrl": "FileProcessingScripts/PHP/uploadfiles.php",
	  "fileFilter.types":"Images|*.jpg:*.jpeg:*.gif:*.png",	  
	  "sendThumbnails": "true",
	  "sendOriginalImages": "false",
	  "useExternalInterface": "true",
	  "fileView.defaultView":"thumbnails",
	  "thumbnail.width": "200",
	  "thumbnail.height": "200",
	  "thumbnail.watermark.enabled":"true",
	  "thumbnail.watermark.imageUrl":"images/element-it.jpg",
		//Center.Left Bottom.Left
	  "thumbnail.watermark.position":"bottom.right ",
	  "thumbnail.watermark.alpha":"0.5",
	  "thumbnail.watermark.text":"Element-IT",
	  "thumbnail.watermark.textStyle.size":"22",
	  "thumbnail.watermark.textStyle.color":"#FF0000",
	  "thumbnail.watermark.textStyle.font":"_sans",
	  "thumbnail.watermark.textStyle.style":"bold"
	};

	swfobject.embedSWF("ElementITMultiPowUpload.swf", "MultiPowUpload_holder", "400", "320", "10.0.0", "Extra/expressInstall.swf", flashvars, params, attributes);
</script>
		</td>
	</tr>
</table>
<script type="text/javascript">	
	var path_to_file = "";
	
	function MultiPowUpload_onThumbnailUploadComplete(li, response)
	{
		//get current file processing script and combine path to file
		path_to_file = MultiPowUpload.getParameter("uploadUrl");		
		path_to_file = path_to_file.substring(0, path_to_file.lastIndexOf("/")+1) + "UploadedFiles/";
		//Here we need parse server response
		//and find url to uploaded thumbnails	
		var keyword = 'File ';
		var keywor_end = " was successfully uploaded";
		var ind = response.indexOf(keyword,0);				
		while(ind>=0)
		{
			url = response.substring(ind+keyword.length, response.indexOf(keywor_end, ind));			
			addThumbnail(url);
			ind = response.indexOf(keyword, ind+keyword.length+1); 
		}		
	}
	
	function addThumbnail(source)
	{
		var Img = document.createElement("img");
		Img.style.margin = "5px";

		Img.src = path_to_file+source+"?"+(new Date()).getTime();;
		
		document.getElementById("thumbnails").appendChild(Img);
	}

	
	function setWatermark()
	{
		MultiPowUpload.setParameter("thumbnail.watermark.text", "");
		MultiPowUpload.setParameter("thumbnail.watermark.imageUrl", document.getElementById("watermark_url").value);		
	}
	
	function setWatermarkText()
	{
		MultiPowUpload.setParameter("thumbnail.watermark.imageUrl", "");
		MultiPowUpload.setParameter("thumbnail.watermark.text", document.getElementById("watermark_text").value);
	}
	
	function setWatermarkPosition(obj)
	{	
		MultiPowUpload.setParameter("thumbnail.watermark.position", obj.value);
	}
	
	function setWatermarkColor()
	{
		setWatermarkText();
		MultiPowUpload.setParameter("thumbnail.watermark.textStyle.color", document.getElementById("watermark_color").value);
	}
	
	function setWatermarkSize()
	{		
		setWatermarkText();
		MultiPowUpload.setParameter("thumbnail.watermark.textStyle.size", document.getElementById("watermark_size").value);		
	}
	
	function setWatermarkStyle(obj)
	{		
		setWatermarkText();
		MultiPowUpload.setParameter("thumbnail.watermark.textStyle.style", obj.options[obj.selectedIndex].value);
	}
</script>
<div id="thumbnails"></div>
<br />
The file uploader doesn’t work? See <a target="_blank" href="http://www.element-it.com/OnlineHelpMulti/MultiPowUpload_Manual_HTML/Troubleshooting.html">here</a> what you need for its proper work. 
<br /><br />
<a href="index.htm" title="Back to examples list">Other examples</a>
</body>
</html>